<template>
	<div class="home">
		<div v-watermark="watermarkConfig" class="bodydiv"></div>
		<div class="main-top" :class="{ 'maintopWidth': isCollapse == true }">
			<el-tabs v-model="currentId" type="card" editable @edit="close" @tab-click="change">
				<el-tab-pane v-for="item in pageList" :key="item.resourceUrl" :label="item.menuName"
					:name="item.resourceUrl">
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-header>
			<div class="home-top">
				<div class="logo-imgs">
					<img src="@/static/home/logo.png" class="top-logo">
					<img src="@/static/home/slogan.png" class="top-slogan">
				</div>
				<div class="home-info">
					<!-- <div class="phone">
						<img src="../static/home/tel.png" class="tel-img">
						<span>支持电话：010-66575610，66575820，66575981</span>
					</div> -->
					<div class="phone">
						<img src="../static/home/user.png" class="tel-img">
						<span>欢迎您:</span>
						<span>{{ userName }}</span>
						<span style="width: 210px;text-align: left;"> &emsp;{{ ShowData }}</span>
					</div>
					<div class="left-botom">
						<div class="bottom-item" @click='openHelp'>
							<img src="../static/home/help.png" class="left-img">
							<span class="home-page">帮助</span>

						</div>
					</div>
					<span>&emsp;|&emsp;</span>
					<span @click="goHome" class="home-page">首页</span>
					<span>&emsp;|&emsp;{{ memberinfo }}</span>
					<img src="@/static/home/out.png" class="out" @click="out">
				</div>
			</div>
		</el-header>
		<el-container>
			<el-aside :class="{ 'minWidth': isCollapse == true }">
				<div class="tagbox">
					<div class="opentag" @click="open">
						<i class="el-icon-s-fold"></i>
					</div>
					<div class="tagtext" :class="{ 'open': !isCollapse }">电梯管理系统</div>
				</div>
				<myMenu :data='menusNav' @gopage="gopage" :isCollapse='isCollapse'></myMenu>
			</el-aside>
			<el-main>
				<div class="main">
					<keep-alive :include="keepList">
						<router-view :key="$route.path + $route.query.id + $route.query.text" />
					</keep-alive>
				</div>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import menus from './menus.js'
import myMenu from './menu.vue'
import keepList from './keepList.js'
import api from '@/api/home/home.js'


export default {
	name: 'Home',
	components: {
		myMenu
	},
	data() {
		return {
			ShowData: '', //当前时间
			watermarkConfig: {//水印
				text: sessionStorage.getItem('username') + '\xa0\xa0' + new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日',
				font: '14px 微软雅黑',
				textColor: '#bcbcbc',
				width: 350, //水印文字的水平间距
				height: 200,  //水印文字的高度间距（低于文字高度会被替代）
				extRotate: -30 //-90到0， 负数值，不包含-90
			},
			userName: sessionStorage.getItem('username'),
			isCollapse: false,
			currentId: '',
			memberinfo: '退出',
			menusNav: [],
			pageList: [{
				menuName: '首页',
				resourceUrl: '/'
			},],
			activeUrl: {},
			keepList: keepList,
		}
	},

	created() {
		this.$onEvent('router', item => {
			let i = this.pageList.findIndex(it => it.resourceUrl == item.resourceUrl);
			if (item.type == 'del') {
				// this.pageList.splice(i, 1);
				this.close(item.resourceUrl, 'remove')
			} else {
				if (i > -1) {
					this.pageList.splice(i, 1);
				}
				this.pageList.splice(1, 0, item);
				this.currentId = item.resourceUrl;
			}
		})

	},
	mounted() {
		this.defaultUrl();
		this.getMenu();
		this.currentTime();
		if (this.$route.path == '/') {
			this.currentId = '/'
		}
	},
	// 销毁定时器
	beforeDestroy() {
		if (this.formatDate) {
			clearInterval(this.formatDate); // 在Vue实例销毁前，清除时间定时器
		}
	},
	methods: {
		//获取菜单替换code
		getMenu() {
			const orgCode = sessionStorage.getItem('userId');
			// console.log(orgCode)
			const replaceOrgCode = (tree, value) => {
				tree.map(it => {
					if (it.resourceUrl && it.resourceUrl.includes('/archivesInfo?id=')) {
						it.resourceUrl = it.resourceUrl.replace('orgCode', value);
					}
					if (it.children && it.children.length) {
						replaceOrgCode(it.children, value)
					}
				});
			};
			// this.menusNav = JSON.parse(sessionStorage.getItem('sysMenuVoList'))
			if(this.menusNav.length==0){
				this.menusNav=menus
			}
			replaceOrgCode(this.menusNav, orgCode);
		},
		currentTime() {
			setInterval(this.formatDate, 1000);
		},
		formatDate() {
			let date = new Date();
			let year = date.getFullYear(); // 年
			let month = date.getMonth() + 1; // 月
			let day = date.getDate(); // 日
			let week = date.getDay(); // 星期
			let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			let hour = date.getHours(); // 时
			hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
			let minute = date.getMinutes(); // 分
			minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
			let second = date.getSeconds(); // 秒
			second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
			this.ShowData = `${year}年${month}月${day}日 ${hour}:${minute}:${second} ${weekArr[week]}`;
		},
		open() {
			this.isCollapse = !this.isCollapse;
		},
		goHome() {
			this.$router.push('/');
			this.currentId = '/'
		},
		gopage(item) {
			console.log(item.resourceUrl)
			// console.log(item.url.split('/'))
			// console.log(item.url.split('/')[1])
			// console.log(item.url.split('/')[1].split('?'))
			// console.log(item.url.split('/')[1].split('?')[0])		
			//从大菜单进去的时候二级菜单不要缓存，切换页签时启动缓存
			let resourceUrl = item.resourceUrl.split('/')[1].split('?')[0] //带参数的路由截取出缓存的name
			let index = this.keepList.indexOf(resourceUrl) //找到url在keepList中的下标
			//在push之前删掉keepList中的需要缓存的name
			this.keepList.splice(index, 1) //这时候从大菜单进去不会缓存
			//push完成后，执行$nextTick
			this.$nextTick(() => {
				this.keepList.splice(index, 0, resourceUrl) //添加name到keepList，切换页签时缓存生效
			})
			//页签相关
			let i = this.pageList.findIndex(it => it.resourceUrl == item.resourceUrl);
			if (i > -1) {
				this.pageList.splice(i, 1)
			}
			this.pageList.splice(1, 0, item);
			// console.log(this.pageList)
			this.currentId = item.resourceUrl;
			this.tagUrl(item);
		},
		//缓存
		defaultUrl() {
			if (sessionStorage.getItem('task')) {
				this.activeUrl = JSON.parse(sessionStorage.getItem('task'))
				this.pageList.splice(1, 0, this.activeUrl)
				this.currentId = this.activeUrl.resourceUrl;
			}
		},
		tagUrl(a) {
			sessionStorage.setItem('task', JSON.stringify(a))
		},
		//删除页签
		close(targetName, action) {
			// console.log(targetName, action)
			if (action === 'remove') {
				let i = this.pageList.findIndex(it => it.resourceUrl == targetName);
				this.pageList.splice(i, 1);
				//填报跳转到查看页面，删除时无法关闭页面，需替换页签的url
				if (targetName == '/joinFilin' && this.$route.path == '/examine') {
					targetName = '/examine';
				}
				if (targetName.includes(this.$route.path)) {
					this.$router.push(this.pageList[i - 1].resourceUrl);
					this.currentId = this.pageList[i - 1].resourceUrl;
				}
				// console.log(this.pageList)
			}
		},
		//切换页签
		change(e) {
			this.$router.push(e.name);
			this.currentId = e.name;
		},
		//打开帮助
		openHelp() {
			this.$router.push('/help');
			let i = this.pageList.findIndex(it => it.resourceUrl == '/help');
			if (i > -1) {
				this.pageList.splice(i, 1)
			}
			this.pageList.splice(1, 0, {
				title: '帮助',
				url: '/help'
			});
			this.currentId = '/help';
		},
		out() {
			this.$router.push('/login');
			sessionStorage.setItem('token', '')
			sessionStorage.setItem('task', '')
		}
	}
}
</script>

<style lang="scss" scoped>
.home {
	width: 100%;
	height: 100%;
}

.bodydiv {
	width: 100%;
	height: 100%;
	z-index: 10000;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: .3;
}

.tagbox {
	display: flex;
	margin-bottom: 10px;
	align-items: center;
}

.tagtext {
	font-size: 18px;
	color: #3DAFFF;
	font-weight: 500;

	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	opacity: 0;

	&.open {
		opacity: 1;
		transition: opacity .2s;
	}
}

.opentag {
	color: #3DAFFF;
	width: 30px;
	height: 30px;
	margin-left: 10px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 24px;
}

.showText {
	display: block;
}

/deep/.el-icon-caret-left {
	color: #fff;
	margin-left: 4px;
	margin-top: 4px;
}

/deep/.el-icon-caret-right {
	color: #fff;
	margin-left: 4px;
	margin-top: 4px;
}

::-webkit-scrollbar {
	height: 5px;
	width: 100%;
}

::-webkit-scrollbar-thumb {
	/*滚动条里面小方块*/
	border-radius: 5px;
	-webkit-box-shadow: inset 0 0 5px #fff;
	box-shadow: inset 0 0 5px #fff;
	background: #DEDEDE;
}

::-webkit-scrollbar-track {
	/*滚动条里面轨道*/
	-webkit-box-shadow: inset 0 0 5px rgba(14, 54, 94, 0.1);
	box-shadow: inset 0 0 5px rgba(14, 54, 94, 0.1);
	border-radius: 5px;
	background: rgba(14, 54, 94, 0.1);
}

.active {
	color: #1D6AFF;
}

.home {
	position: relative;

	.maintopWidth {
		width: calc(100vw - 116px) !important;
		transition: width .2s;
	}

	.main-top {
		transition: width .2s;
		width: calc(100vw - 366px);
		height: 56px;
		background: #F4F8FF;
		border-radius: 20px 20px 0px 0px;
		position: absolute;
		top: 73px;
		right: 16px;
		z-index: 1;
		color: #696969;
		padding: 0 25px;
		box-sizing: border-box;

		.tops {
			width: 100%;
			height: 100%;
			display: flex;
			overflow-x: auto;
			overflow-y: hidden;
		}

		.pages {
			line-height: 56px;
			margin-left: 30px;
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			display: flex;
			flex: none;
			align-items: center;
			cursor: pointer;

			&:nth-child(1) {
				margin-left: 10px;
			}

			.close-img {
				width: 15px;
				height: 15px;
				margin-left: 5px;
			}
		}
	}
}

.el-header {
	background: linear-gradient(90deg, #3D7FFF 0%, #3DAFFF 100%);
	color: #333;
	text-align: center;
	height: 118px !important;
}

.home-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;

	.logo-imgs {
		display: flex;
		align-items: center;

		.top-logo {
			width: 240px;
			height: 54px;
			margin-bottom: 25px;
		}

		.top-slogan {
			width: 391px;
			height: 117px;
			margin-left: 102px;
		}
	}

	.home-info {
		height: 24px;
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 24px;
		margin-right: 30px;
		margin-bottom: 25px;
		display: flex;
		align-items: center;

		.phone {
			margin-right: 28px;
			border-radius: 4px;
			background: rgba(21, 86, 211, 0);
			padding: 5px 14px 4px 11px;
			display: flex;
			align-items: center;
			font-size: 12px;
			font-weight: 400;
			color: #FFFFFF;

			.tel-img {
				width: 19px;
				height: 19px;
				margin-right: 12px;
			}
		}

		.home-page {
			cursor: pointer;
		}

		.out {
			width: 18px;
			height: 18px;
			margin-left: 5px;
			cursor: pointer;
		}
	}
}

.el-container {
	height: calc(100vh - 118px);
	background: #F4F8FF;
}

.el-aside {
	padding: 20px;
	width: 350px !important;
	transition: width .2s;
}

.el-aside * {
	user-select: none !important;
}

/deep/.el-menu * {
	user-select: none !important;
}

.minWidth {
	width: 100px !important;
	transition: width .2s;
}

.left-botom {
	.bottom-item {
		display: flex;
		align-items: center;
		font-size: 14px;
		cursor: pointer;

		.left-img {
			width: 19px;
			height: 19px;
			margin-right: 5px;
		}
	}
}

.el-main {
	background-color: #fff;
	text-align: center;
	box-shadow: 0px 0px 7px 0px rgba(211, 223, 238, 0.3);
	border-radius: 0px 0px 20px 20px;
	margin-bottom: 20px;
	margin-right: 16px;
	padding: 30px 20px 10px 20px;
	// padding: 20px;
}

.main {
	overflow-y: auto;
	height: 100%;
}

//页签相关
.main-top /deep/.el-tabs__new-tab {
	display: none;
}

.main-top /deep/.el-tabs__header {
	margin: 13px 0 0 0;
}

.main-top /deep/.el-tabs--card>.el-tabs__header {
	border: 0;
}

.main-top /deep/.el-tabs__item:nth-child(1) .el-icon-close {
	display: none;
}

.main-top /deep/.el-tabs--card>.el-tabs__header .el-tabs__nav {
	border: 0;
}

.main-top /deep/.el-tabs--card>.el-tabs__header .el-tabs__item {
	border: 0;
}

.main-top /deep/.el-icon-arrow-left {
	position: relative;
	bottom: 3px;
}

.main-top /deep/.el-icon-arrow-right {
	position: relative;
	bottom: 3px;
}
</style>
